<template>
    <div>
        <van-nav-bar
            left-arrow
            @click-left="onClickLeft"
        />
        <div class="box">
            <p class="top">{{ detail.name }}</p>
            <p class="xia" v-for="item in detail.services" :key="item.cinemaId">
                <span class="name">{{ item.name }}</span>
                <span class="text">{{ item.description }}</span>
            </p>
        </div>
    </div>
</template>

<script>
import { CinemaInfo } from '@/request/request'
import Vue from 'vue';
import { NavBar } from 'vant';

Vue.use(NavBar);
export default {
    data () {
        return {
            detail:{}
        }
    },
    mounted(){
      let cinemaid = this.$route.query.id
      CinemaInfo(cinemaid).then(res =>{
        this.detail = res.data.cinema
        console.log(this.detail);
      })
    },
    methods: {
        onClickLeft() {
            this.$router.back()
        }
    }
}
</script>

<style lang="scss" scoped>
    .box{
        .top{
            text-align: center;
        }
        .xia{
            display: flex;

        }
        padding: 10px 40px;
        .name{
            height: 22px;
            font-size: 12px;
            border: 0.5px solid orange;
            color: orange;
            margin: 3px 5px;
            display: inline-block;
            padding: 2px 7px;
            // box-sizing: border-box;
            margin-right: 15px;
            text-align: center;
            width: 50px;
            line-height: 22px;
        }
        .text{
            width: 270px;
            font-size: 14px;
            display: inline-block;
            color: rgb(113, 113, 113);
        }
    }
</style>
